<template>
  <div class="engineBtn">
    <el-button
      v-bind:class="[engine, 'btnBase', { inactive: inactive }]"
      @click="switchTranslator"
      circle
    ></el-button>
  </div>
</template>

<script>
import WindowController from "./WindowController";
import { MessageType, WinOpt } from "../tools/enums";
import { ipcRenderer as ipc } from "electron";
import { RuleName } from "../tools/rule";

export default {
  name: "EngineButton",
  mixins: [WindowController],
  props: ["engine"],
  data: function() {
    return {
      engineClass: this.engine
    };
  },
  computed: {
    inactive() {
      return this.$store.state.sharedResult.engine != this.engine;
    }
  },
  methods: {
    switchTranslator() {
      this.callback("translatorType|" + this.engine);
    }
  }
};
</script>

<style scoped>
.engineBtn {
  width: 100%;
  height: 100%;
}
.inactive {
  filter: grayscale(90%);
}
.Baidu {
  background-image: url("../images/baidu.svg");
}
.Google {
  background-image: url("../images/google.svg");
}
.Caiyun {
  background-image: url("../images/caiyun.png");
}
.Sogou {
  background-image: url("../images/sogou.svg");
}
.Youdao {
  background-image: url("../images/youdao.png");
}
.btnBase {
  background-position: center;
  background-size: contain;
}
</style>
